<template>
  <div class="bg">
    <img
      class="animation"
      ref="bg"
      :style="bgStyle"
      src="../../assets/images/bg_pattern_grass.png"
      alt=""
    />
  </div>
</template>

<script>
export default {
  //页面轮播背景组件
  data() {
    return {
      bgStyle: {
        width: null,
        "--x-offset": null,
      },
      // 图片的尺寸
      image: {
        width: 1400,
        height: 4200,
      },
    };
  },
  created() {
    const fun = () => {
      // const clientHeight =
      //   document.body.clientHeight |
      //   (document.documentElement && document.documentElement.clientHeight);
      // const xOffset = parseInt(
      //   (this.image.width / this.image.height) * clientHeight
      // );
      this.bgStyle["--x-offset"] = this.image.height + "px";
      this.bgStyle.width = this.image.width + "px";
      console.log(this.$refs.bg.src)
    };
    window.onresize = () => {
      fun();
      // 重置 animation 保证动画刷新
      this.$refs.bg.classList.remove("animation");
      let timer = setTimeout(() => {
        this.$refs.bg.classList.add("animation");
      }, 100);
    };
    fun();
  },
};
</script>

<style lang="less" scoped>
.bg{
  width: 1400px;
  height: 258px;
  position: relative;
}
/* 界面背景 */
.animation {
  z-index: 1;
  width: 1400px;
  height: 258px;
  // background: url("../../assets/images/bg_pattern_grass.png") right no-repeat;
  // background-repeat: repeat-x;
  // background-size: var(--x-offset) auto, auto;
  //   height: 100%;
  // position: absolute;
  // left: 0;
  // top: 0;
  animation: bg 110s linear infinite;
}

@keyframes bg {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-1 * var(--x-offset)));
  }
}
</style>
